<template>
	<view class="flex-col page">
	  <view class="flex-row items-start flex-auto relative group">
	    <image
	      class="image_7"
	      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654ef63d5a7e3f031050da04/654ef6cc87ca550011b19e39/16996743712865618166.png"
	    />
	    <image
	      class="image_5"
	      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654ef63d5a7e3f031050da04/654ef6cc87ca550011b19e39/16996743717194667866.png"
	    />
	    <image
	      class="image_8"
	      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654ef63d5a7e3f031050da04/654ef6cc87ca550011b19e39/16996743690143472382.png"
	    />
	    <image
	      class="image_6 pos_2"
	      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654ef63d5a7e3f031050da04/654ef6cc87ca550011b19e39/16996743690259786550.png"
	    />
	    <image
	      class="image_4 pos"
	      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654ef63d5a7e3f031050da04/654ef6cc87ca550011b19e39/16996743690290815689.png"
	    />
	    <view class="flex-col section space-y-22 pos_3">
	      <text class="self-center text_2">注册</text>
	      <view class="flex-col self-start group_2 space-y-6">
	        <view class="flex-col relative">
	          <view class="flex-col justify-start items-start relative group_3">
	            <image
	              class="image_11"
	              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654ef63d5a7e3f031050da04/654ef6cc87ca550011b19e39/16996743713482876418.png"
	            />
	            <view class="flex-col section_2 pos_4">
	              <view class="flex-row items-center group_4 space-x-20">
	                <image
	                  class="image_9"
	                  src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654ef63d5a7e3f031050da04/654ef6cc87ca550011b19e39/21d887d062500b647c8283f2b9d50885.png"
	                />
	                <input style="color: #3b3b3b; margin-left: 20rpx;" class="font_2 text_3" v-model.trim="username" focus="true" placeholder="用户名"/>
	              </view>
	              <image
	                class="image_10"
	                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654ef63d5a7e3f031050da04/654ef6cc87ca550011b19e39/16996743716817993837.png"
	              />
	              <view class="flex-row items-center group_5 space-x-20">
	                <image
	                  class="image_9"
	                  src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654ef63d5a7e3f031050da04/654ef6cc87ca550011b19e39/cc2cb6c61eb4a1a040f20c0928e8eb2d.png"
	                />
	                <input style="color: #3b3b3b; margin-left: 20rpx;"  class="font_2" v-model.trim="password" placeholder="密码" type="password"/>
	              </view>
	            </view>
	          </view>
	          
			
	          <navigator class="font_1 text_5 pos_6" style="font-size: 40rpx;margin-top: 50rpx;margin-left: 50rpx;" click="back1()">取消</navigator>
			  
	          <view class="flex-col justify-start items-center text-wrapper pos_5">
	            <text class="font_2 text_4" @click="tologin()">绑定手机号</text>
	          </view>
	          <image
	            class="image_12 pos_7"
	            src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654ef63d5a7e3f031050da04/654ef6cc87ca550011b19e39/16996796614506886905.png"
	          />
	        </view>
	        <view class="flex-col justify-start items-end relative group_7">
	          <image
	            class="image_14"
	            src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654ef63d5a7e3f031050da04/654ef6cc87ca550011b19e39/16996796614481190031.png"
	          />
	          <view class="section_3 pos_8"></view>
	        </view>
	      </view>
	    </view>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			username:'',
			password:'',
			userId:'',
			}
		},
		methods: {
			tologin()
			{
				if(this.username!=null && this.username!=''&&this.password!=null&&this.password!=''){
					this.request({
						method:'POST',
						url:'/user/register',
						data:{
							username:this.username,
							password:this.password
						}
					}).then(res=>{
						console.log(res)
						if(res.code==="1"){
							console.log(res.map)
							this.userId = res.data
							uni.navigateTo({
								url: '/pages/validate/validate?userId='+this.userId,
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						}
						else{
							uni.showToast({
								icon:'none',
								title:'注册失败'
							})
						}
					})
				}else{
					
				}
			}
		}
	}
</script>

<style>
	
	
	html {
	  font-size: 16px;
	}
	
	body {
	  margin: 0;
	  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
	    'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	
	view,
	image,
	text {
	  box-sizing: border-box;
	  flex-shrink: 0;
	}
	
	#app {
	  width: 100vw;
	  height: 100vh;
	}
	
	.flex-row {
	  display: flex;
	  flex-direction: row;
	}
	
	.flex-col {
	  display: flex;
	  flex-direction: column;
	}
	
	.justify-start {
	  justify-content: flex-start;
	}
	
	.justify-end {
	  justify-content: flex-end;
	}
	
	.justify-center {
	  justify-content: center;
	}
	
	.justify-between {
	  justify-content: space-between;
	}
	
	.justify-around {
	  justify-content: space-around;
	}
	
	.justify-evenly {
	  justify-content: space-evenly;
	}
	
	.items-start {
	  align-items: flex-start;
	}
	
	.items-end {
	  align-items: flex-end;
	}
	
	.items-center {
	  align-items: center;
	}
	
	.items-baseline {
	  align-items: baseline;
	}
	
	.items-stretch {
	  align-items: stretch;
	}
	
	.self-start {
	  align-self: flex-start;
	}
	
	.self-end {
	  align-self: flex-end;
	}
	
	.self-center {
	  align-self: center;
	}
	
	.self-baseline {
	  align-self: baseline;
	}
	
	.self-stretch {
	  align-self: stretch;
	}
	
	.flex-1 {
	  flex: 1 1 0%;
	}
	
	.flex-auto {
	  flex: 1 1 auto;
	}
	
	.grow {
	  flex-grow: 1;
	}
	
	.grow-0 {
	  flex-grow: 0;
	}
	
	.shrink {
	  flex-shrink: 1;
	}
	
	.shrink-0 {
	  flex-shrink: 0;
	}
	
	.relative {
	  position: relative;
	}
	
	
	.page {
	  background-color: #9dbff3;
	  overflow: hidden;
	  width: 100%;
	  overflow-y: auto;
	  overflow-x: hidden;
	  height: 100%;
	}
	.font_1 {
	  font-size: 28rpx;
	  font-family: HarmonyOSSansSC;
	  color: black;
	}
	.group {
	  padding: 8rpx 0 938rpx;
	  overflow-y: auto;
	}
	.image_7 {
	  margin-left: -132rpx;
	  margin-top: 224rpx;
	  width: 344rpx;
	  height: 344rpx;
	}
	.image_5 {
	  margin-left: 356rpx;
	  width: 256rpx;
	  height: 256rpx;
	}
	.image_8 {
	  margin-left: -588rpx;
	  margin-top: 396rpx;
	  opacity: 0.2;
	  filter: blur(44rpx);
	  width: 284rpx;
	  height: 106rpx;
	}
	.image_6 {
	  width: 366rpx;
	  height: 394rpx;
	}
	.pos_2 {
	  position: absolute;
	  left: 50%;
	  top: 117rpx;
	  transform: translateX(-50%);
	}
	.image_4 {
	  width: 128rpx;
	  height: 128rpx;
	}
	.pos {
	  position: absolute;
	  left: 72rpx;
	  top: 0;
	}
	.section {
	  padding-top: 136rpx;
	  filter: drop-shadow(0px 0px 80rpx #373e7d0d);
	  background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654ef63d5a7e3f031050da04/654ef6cc87ca550011b19e39/16996743689097780430.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	}
	.space-y-22 > view:not(:first-child),
	.space-y-22 > text:not(:first-child),
	.space-y-22 > image:not(:first-child) {
	  margin-top: 44rpx;
	}
	.pos_3 {
	  position: absolute;
	  left: 0;
	  right: 0;
	  top: 454rpx;
	}
	.text_2 {
	  color: #191c32;
	  font-size: 64rpx;
	  font-family: HarmonyOSSansSC;
	  line-height: 58rpx;
	}
	.group_2 {
	  margin-left: -382rpx;
	  width: 1354rpx;
	}
	.space-y-6 > view:not(:first-child),
	.space-y-6 > text:not(:first-child),
	.space-y-6 > image:not(:first-child) {
	  margin-top: 12rpx;
	}
	.group_3 {
	  padding-top: 150rpx;
	}
	.image_11 {
	  filter: blur(194rpx);
	  width: 462rpx;
	  height: 462rpx;
	}
	.section_2 {
	  padding: 0 28rpx;
	  background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654ef63d5a7e3f031050da04/654ef6cc87ca550011b19e39/16996743716466495609.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	}
	.pos_4 {
	  position: absolute;
	  right: 272rpx;
	  top: 0;
	}
	.group_4 {
	  padding: 36rpx 12rpx 28rpx;
	}
	.image_9 {
	  width: 64rpx;
	  height: 64rpx;
	}
	.font_2 {
	  font-size: 32rpx;
	  font-family: fantasy;
	  line-height: 29rpx;
	  color: #ffffff;
	}
	.text_3 {
	  line-height: 30rpx;
	}
	.image_10 {
	  width: 592rpx;
	  height: 2rpx;
	}
	.group_5 {
	  padding: 32rpx 12rpx;
	}
	.space-x-20 > view:not(:first-child),
	.space-x-20 > text:not(:first-child),
	.space-x-20 > image:not(:first-child) {
	  margin-left: 40rpx;
	}
	.equal-division {
	  align-self: flex-end;
	  margin-right: 376rpx;
	  margin-top: 22rpx;
	}
	.group_6 {
	  width: 444rpx;
	}
	.equal-division-item {
	  padding: 24rpx 0;
	  filter: drop-shadow(0px 40rpx 60rpx #373e7d0d);
	  background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654ef63d5a7e3f031050da04/654ef6cc87ca550011b19e39/16996743714773657975.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	  width: 108rpx;
	  height: 108rpx;
	}
	.image_13 {
	  width: 60rpx;
	  height: 60rpx;
	}
	.text_5 {
	  color: #9a9dd8;
	  line-height: 26rpx;
	}
	.pos_6 {
	  position: absolute;
	  left: 473rpx;
	  top: 50%;
	  transform: translateY(-50%);
	}
	.text-wrapper {
	  padding: 44rpx 0 36rpx;
	  filter: drop-shadow(0px 40rpx 30rpx #191c321a);
	  background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654ef63d5a7e3f031050da04/654ef6cc87ca550011b19e39/16996743714668595525.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	  width: 290rpx;
	}
	.pos_5 {
	  position: absolute;
	  right: 272rpx;
	  top: 310rpx;
	}
	.text_4 {
	  color: #ffffff;
	}
	.image_12 {
	  filter: blur(104rpx);
	  width: 290rpx;
	  height: 290rpx;
	}
	.pos_7 {
	  position: absolute;
	  right: 0;
	  bottom: 6rpx;
	}
	.group_7 {
	  height: 69rpx;
	}
	.image_14 {
	  margin-right: 224rpx;
	  filter: blur(164rpx);
	  width: 241rpx;
	  height: 69rpx;
	}
	.section_3 {
	  background-color: #00000000;
	  width: 750rpx;
	  height: 68rpx;
	}
	.pos_8 {
	  position: absolute;
	  right: 222rpx;
	  top: 0;
	}
</style>
